<!--  -->
<template>
  <div>
    <h1>人员列表</h1>
    <input type="text"
           v-model="name"
           placeholder="请输入姓名">
    <button @click="personAdd">添加人员</button>
    <ul v-for="(item,index) in personList"
        :key="index">
      <li>id:{{item.id}}-----姓名:{{item.name}}</li>
    </ul>
    <!-- <h1 style="color:red">上面Counter组件里面的num总和为:{{$store.state.sum}}</h1> -->
    <h1 style="color:red">上面Counter组件里面的num总和为:{{sum}}</h1>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import { mapState } from "vuex";
export default {
  data () {
    return {
      name: "",
    }
  },
  computed: {
    // personList () {
    //   return this.$store.state.personList;
    // }
    // 使用mapState函数
    ...mapState({ personList: "personList", sum: "sum" })
  },
  methods: {
    personAdd () {
      const p = { id: nanoid(), name: this.name };
      this.$store.commit("PERSONADD", p);
      //清空搜索框
      this.name = "";
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>